<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <div class="step-group" style="margin: 20px;margin-bottom: 1px;">
        <el-steps :active="1">
          <el-step title="报送" icon="el-icon-edit"></el-step>
          <el-step title="发改" icon="el-icon-upload"></el-step>
          <!--<el-step title="修改分解方案" icon="el-icon-edit"></el-step>-->
          <el-step title="印发" icon="el-icon-upload"></el-step>
        </el-steps>
      </div>
      <div style="margin: 20px 10px;">
        <el-form
          label-width="130px"
          :model="validateForm"
          style="padding-right: 30px;"
          :rules="hasOpinionFlag?opinionRules:notOpinionRules"
          ref="validateForm"
        >
          <el-row>
            <el-col :span="16" style="margin-top: 27px;">
              <el-form-item class="form-item" label="办理结果 :" prop="approved">
                <el-radio-group v-model="validateForm.approved">
                  <el-radio :label="true">同意</el-radio>
                  <el-radio :label="false">不同意</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item class="form-item" label="办理意见 :" prop="opinion">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入办理意见"
                  v-model="validateForm.opinion"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="text-align: center;">
        <el-button type="warning" @click="DRcheckApprovalValidate()">确定</el-button>
        <el-button type="info" @click.stop="goBack()">关闭</el-button>
      </div>
      <el-collapse v-model="activeNames" style="margin-top:2rem;">
        <el-collapse-item name="3">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">调整建议信息</div>
            </div>
          </template>
          <div>
            <table class="bs-table">
              <tr class="bs-table_row">
                <th class="bs-table_th" style="width: 200px">调整建议</th>
                <td class="bs-table_td" colspan="3">{{adjustOpinionData.content}}</td>
              </tr>
              <tr class="bs-table_row">
                <th class="bs-table_th">调整建议相关附件</th>
                <td class="bs-table_td" colspan="3">
                  <div v-for="item in adjustOpinionData.files" :key="item">
                    <el-link :href="'/planning/file/download/'+item.fileId" type="danger"
                    >{{item.fileName}}
                    </el-link>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">修订调整处理历史信息</div>
            </div>
          </template>
          <avue-crud :data="historyData"
                     :option="option"
                     :page="page"
                     :table-loading="tableLoading"
                     @on-load="getToDoList"
                     class="avuecrud">
          </avue-crud>
        </el-collapse-item>
      </el-collapse>
    </div>
  </basic-container>
</template>

<script>
  import {getReportDetail, DRcheckApprovalValidate, getReviseHistory, getAdjustOpinionData} from "@/api/pim/pim";
  import {getfileinfopage} from "@/api/system"
  import {getNotNull} from '@/views/util'
  import {getFileTypeFiles} from '@/views/util'

  export default {
    name: "DRcheckApproval",
    created() {
      this.putAdjustOpinionData();
      this.getReviseHistory();
    },
    data() {
      return {
        headerData: {
          title: '发改办理'
        },
        validateForm: {
          approved: true,
          opinion: '',
        },
        opinionRules: {
          approved: [
            {required: true, message: "请选择是否同意", trigger: "blur"}
          ],
          opinion: [
            {required: false,}
          ],
        },
        notOpinionRules: {
          approved: [
            {required: true, message: "请选择是否同意", trigger: "blur"}
          ],
          opinion: [
            {required: true, message: "请输入办理意见", trigger: "blur"}
          ],
        },
        hasOpinionFlag: true,
        activeNames: [ '2', '3'],
        adjustOpinionData: {
          content: '',
          files: [],
        },
        historyData: [],
        option: {
          page: false,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          menuWidth: 100,
          menu: false,
          keyId: "id",
          column: [
            {
              label: "环节名称",
              prop: "taskName",
              cell: true,
              width: 120,
            },
            {
              label: "办理部门",
              prop: "assigneeNickname",
              cell: true,
              width: 180,
            },
            {
              label: "相关意见",
              prop: "opinion",
              cell: true,
            },
          ]
        },

      }
    },
    watch: {
      'validateForm.approved'(val) {
        if (val) {
          this.hasOpinionFlag = true
        }
        if (!val) {
          this.hasOpinionFlag = false
        }
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      DRcheckApprovalValidate() {
        this.$refs.validateForm.validate(valid => {
          if (valid) {
            this.$confirm("确定办理么?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              DRcheckApprovalValidate(this.$route.params.id, this.validateForm).then(response => {
                if (response.data.code == '0') {
                  this.$message({
                    message: '办理成功！',
                    type: 'success'
                  });
                  this.$router.go(-1);
                }
              })
            })
          }
        })
      },
      getReviseHistory() {
        getReviseHistory(Object.assign({
          reviseId: this.$route.query.reviseId,
        })).then(response => {
          this.historyData = response.data.data;
        })
      },
      putAdjustOpinionData() {
        getAdjustOpinionData(this.$route.params.id).then(async reponse => {
          var records = reponse.data.data;
          this.adjustOpinionData.content = records.content;
          let files = await getFileTypeFiles(records.contentFileIds);
          this.adjustOpinionData.files = files;
        })
      },


    },
  }
</script>

<style lang="scss" scoped>
  .step-group {
    margin: 5rem 0;
    margin-bottom: 1px;
  }

  .form-item {
    color: black;
    font-size: 16px;
    font-weight: 600;
  }

  /deep/ .el-collapse-item__content {
    padding-bottom: 0px;
  }

  /deep/ .avue-crud__menu {
    min-height: 0px;
  }

  .avue-crud {
    width: 100%;
  }
</style>
